<template>
    <div class="help">
        <div class="my_score flex-between">
            <h3>我的积分</h3>
            <div class="flex"><span>{{score}}</span>积分</div>
        </div>
        <div class="score-box">
            <h3>选择帮助积分</h3>
            <ul class="flex score-ul">
                <li v-for="(item,index) in scores" :key="index" class="flex-center" :class="{'active':score_index == index}" @click="score_index = index;money=''">
                    <span>{{item}}</span>积分
                    <div></div>
                </li>
            </ul>
            <div class="score-input flex">
                <input type="number" placeholder="请输入积分（选填）"  v-model="money" @focus="score_index = -1">
                <span>积分</span>
            </div>
        </div>
        <div class="submit-btn flex-center" @click="pay">立即支付</div>
        <filter-box v-if="showFilter">
            <div class="content flex-center">
                <img src="../../assets/img/help_success.png" alt="" v-if="pay_success"  @click="back">
                <img src="../../assets/img/help_error.png" alt="" v-if="pay_error"  @click="goChongzhi">
                <div></div>
                <i class="iconfont iconerror-1" @click="back"></i>
            </div>
        </filter-box>
    </div>
</template>

<script>
    import FilterBox from "@/components/filterbox"
    export default {
        name: "help",
        components:{
            FilterBox
        },
        data(){
            return {
                scores:[10,20,50,100,200,500],
                score_index:0,
                money:null,
                showFilter:false,
                pay_success:false,
                pay_error:false,
                cid:null,
                score:null,
                uid:null,
                user_id:null
            }
        },
        mounted(){
            this.uid = this.$route.query.uid;
            this.cid = this.$route.query.id;
            this.getData()
        },
        methods:{
            goChongzhi(){
              this.$router.push({
                  path:"/scoreIn"
              })
            },
            back(){
                this.showFilter = false;
                this.$router.go(-1)
            },
            getData(){
                this.$http.post('user/myIntegral',{}).then(res=>{
                    console.log(res)
                    this.score = res.data.userinfo.money;
                    this.user_id = res.data.userinfo.user_id
                })
            },
            pay(){
                if(this.uid == this.user_id){
                    this.$toast("不能向自己发起捐款")
                    return;
                }
                this.money = this.money ? this.money : this.scores[this.score_index];
                if(this.money > this.score){
                    this.showFilter = true;
                    this.pay_error = true
                    return;
                }
                if(!this.money){
                    this.$toast('积分不能为空')
                    return
                }
                this.$http.post('index/contribution',{
                    cid:this.cid,
                    num:this.money
                }).then(res=>{
                    console.log(res)
                    if(res.code == 1){
                        this.showFilter = true;
                        this.pay_success= true;
                        this.getData()
                    }else{
                        this.$toast(res.msg)
                    }
                })

            }
        }
    }
</script>

<style scoped lang="less">
    .help{
        padding: 30px 30px 98px;
        .my_score{
            width: 690px;
            height: 98px;
            background-color: #ffffff;
            border-radius: 10px;
            padding: 0 30px;
            box-sizing: border-box;
            h3{
                font-size: 30px;
                color: #000;
            }
            div{
                font-size: 30px;
                color: #333333;
                span{
                    font-size: 38px;
                    font-weight: bold;
                    color: #185fff;
                    margin-right: 4px;
                }
            }
        }
        .score-box{
            width: 690px;
            height: 454px;
            background-color: #ffffff;
            border-radius: 10px;
            padding: 30px;
            box-sizing: border-box;
            margin-top: 30px ;
            h3{
                font-size: 30px;
                margin-bottom: 30px;
            }
            .score-ul{
                flex-wrap: wrap;
                li{
                    width: 196px;
                    height: 88px;
                    border:2px solid #eee;
                    font-size: 28px;
                    color: #999999;
                    border-radius: 8px;
                    margin-right: 21px;
                    margin-bottom: 30px;
                    box-sizing: border-box;
                    position: relative;
                    overflow: hidden;
                    &:nth-child(3n){
                        margin-right: 0;
                    }
                    span{
                        font-size: 34px;
                        font-weight: bold;
                    }
                    div{
                        position: absolute;
                        right:-13px;
                        bottom:-20px;
                        width: 80px;
                        height:40px;
                        transform: rotateZ(-25deg);
                        background: #185fff;
                        display: none;
                        &::after{
                            content: "✔";
                            display: inline-block;
                            position: absolute;
                            left: 42px;
                            top:-8px;
                            color:white;
                            transform: rotateZ(25deg);
                            text-align: center;
                        }
                    }
                }
                .active{
                    border-color: #185fff;
                    color: #185fff;
                    div{
                        display: block;
                    }
                }
            }
            .score-input{
                width: 630px;
                height: 88px;
                background-color: #ffffff;
                border-radius: 10px;
                border: solid 2px #c2c2c2;
                input{
                    width: 550px;
                    padding: 0 30px;
                    box-sizing: border-box;
                    height:100%;
                    background: transparent;
                }
                span{
                    font-size: 28px;
                    color: #999999;
                }
            }
        }
        .submit-btn{
            height:98px;
            background: #185fff;
            color:white;
            font-size: 36px;
            position: fixed;
            left: 0;
            bottom:0;
            width: 100%;
        }
        .content{
            height: 100%;
            width:100%;
            flex-direction: column;
            i{
                font-size: 60px;
                color:#ddd;
            }
            div{
                width: 2px;
                height:90px;
                background: #ddd;
            }
        }
    }
</style>
